<head>
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<div class="banner-area surface-0 flex align-items-center justify-content-center min-h-screen min-w-screen overflow-hidden" background="assets/back1-1.png">
    <!--顶部的显示框架-->
    <div class="grid justify-content-center" style="min-width:80%;">
        <div class="col-12 mt-5 xl:mt-0 text-center">
            <img src="assets/logo2.png" alt="logo" class="mb-5" style="width:81px; height:81px;">
            <div class="banner-content col-lg-10">
                <h5 class="text-white text-uppercase">GANZHOUSHISHUIZIYUANJIANGUAN</h5>
                <h1 class="text-white" style="font-size: 100px; font-weight:900;"> 赣州市水资源监管 </h1>
            </div>
        </div>
        <!--中框显示内容-->
        <div class="col-12 xl:col-6" style="border-radius:56px; padding:0.3rem; background: linear-gradient(180deg, var(--primary-color) 10%, rgba(33, 150, 243, 0) 30%);">
            <div class="h-full w-full m-0 py-7 px-4" style="border-radius:53px; background: linear-gradient(180deg, var(--surface-50) 38.9%, var(--surface-0));">
                <div class="text-left mb-5" style="margin-left: 80px;">
                    <div class="text-2000 text-5xl mb-3">使用密码登录</div>
                </div>
            
                <div class="w-full md:w-10 mx-auto">
                    <label for="账号" class="block text-900 text-xl font-medium mb-2">账号</label>
                    <input [(ngModel)]="username" id="email1" type="text" placeholder="账号" pInputText class="w-full mb-3" style="padding:1rem;">
            
                    <label for="password1" class="block text-900 font-medium text-xl mb-2">密码</label>
                    <p-password id="password1" [(ngModel)]="password" placeholder="密码" [toggleMask]="true" styleClass="w-full mb-3"></p-password>
                <div style="height: 60px;"></div>
                    <button pButton pRipple label="登录" class="w-full p-3 text-xl" (click)="onClick()"></button><span>需要新建用户？请联系管理员</span>
                </div>
            </div>
        </div>
    </div>
</div>